<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>网页</title>
</head>
 <style>
     a {
         width: 150px;
         height: 50px;
         background-color: pink;
         /* 把行内元素 a 转换为 块级元素 */
         display: block;
     }
     * {
         margin: 0;
         padding: 0;
         box-sizing: border-box; /*  这样的话padding和border就不会撑大盒子了 */
     }
     div {
         width: 300px;
         height: 100px;
         background-color: cornflowerblue;
         /* 把 div 块级元素转换为行内元素 */
         display: inline;
     }

     span {
         width: 300px;
         height: 30px;
         background-color: skyblue;
         display: inline-block;
     }
 </style>
<body>
<h1>
    <div id="a">1</div>
    </br></br>
    <div id="span">中国</div>
    <div id="*">中国2</div>
</h1>
</body>
</html>